<template>
  <div class="affetp-aireff">
    <div class="flex">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <div @click="btnClick">
          <i :class="active == true ? 'el-icon-s-unfold' : 'el-icon-s-fold' "></i>
        </div>
      </div>
      index : {{newValue}}
    </div>
    <div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    data() {
      return {
        newValue:null,
        active: true
      }
    },
    watch:{
      $route:{
        handler(newValue){
          this.newValue = newValue.query.index
        }
      },
      immediate:true,
      deep:true
    },
    created(){
      this.newValue = this.$route.query.index // 初始化的时候进行赋值
    },
    computed:{
      ...mapGetters(['isCollapse'])
    },
    methods:{
      btnClick(){
        this.active = !this.active
        this.$store.state.isCollapse  = !this.active
      }
    }
  }
</script>

<style lang="less">
  .affetp-aireff{
    .flex{
      flex: 3;
    }
    .breadcrumb{
      width: 100%;
      height: 80px;
      line-height: 80px;
      // padding-left: 60px;
      background: #f5f5f5;
      .el-icon-s-unfold:before{
        font-size: 32px;
        cursor: pointer;
      }
      .el-icon-s-fold:before{
        font-size: 32px;
        cursor: pointer;
      }
    }
  }
</style>
